<template>
  <view class="dropdown-container">
    <!-- 下拉菜单头部 -->
    <view class="dropdown-header">
      <view v-for="(drop, dropIndex) in props.dropDownDataList" :key="dropIndex" class="dropdown-item" :class="{ active: drop.show }" @click="toggleDropdown(dropIndex, $event)">
        <text class="dropdown-label" :class="{ selected: drop.selectedIndex !== -1 }">{{ drop.label }}</text>
        <uni-icons type="down" size="20" class="dropdown-icon" :color="drop.selectedIndex !== -1?'#409eff':''" :class="{ rotate: drop.show }" />
      </view>
    </view>

    <!-- 下拉菜单内容区域 -->
    <view v-for="(drop, dropIndex) in props.dropDownDataList" :key="dropIndex" class="dropdown-content" :class="{ show: drop.show }" @click.stop>
      <view
        class="dropdown-option"
        v-for="(item, index) in drop.dataList"
        :key="index"
        :class="{ optionActive: drop.selectedIndex === index }"
        @click="handleSelect(dropIndex, index, item)"
        style="display: flex; justify-content: space-between; align-items: center"
      >
        <text>{{ item.label }} {{ drop.selectedIndex }} {{ index }}</text>
        <uni-icons type="checkmarkempty" size="20" class="option-check" color="#409eff" v-if="drop.selectedIndex === index" style="margin-left: 16rpx" />
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="dropdown-mask" :class="{ active: hasActiveDropdown }" @click="closeAllDropdowns"></view>
  </view>
</template>

<script setup lang="ts" name="CustomDropdown">
  import { ref, computed, PropType, watch } from 'vue'

  // 定义props类型
  const props = defineProps({
    dropDownDataList: {
      type: Array as PropType<any[]>,
      required: true,
    },
  })


  // 检查是否有打开的下拉菜单（仅控制遮罩层显示）
  const hasActiveDropdown = computed(() => {
    return props.dropDownDataList.some((item) => item.show)
  })

  // 切换下拉菜单显示状态
  const toggleDropdown = (dropIndex: number, event: Event) => {
    event.stopPropagation()
    props.dropDownDataList.forEach((item, index) => {
      if (index !== dropIndex) item.show = false
    })
    props.dropDownDataList[dropIndex].show = !props.dropDownDataList[dropIndex].show
  }

  // 关闭所有下拉菜单
  const closeAllDropdowns = () => {
    props.dropDownDataList.forEach((item) => {
      item.show = false
    })
  }

  // 选择下拉选项
  const handleSelect = (dropIndex: number, optionIndex: number, item: string) => {
    props.dropDownDataList[dropIndex].model = props.dropDownDataList[dropIndex].selectedIndex === optionIndex ? null : item
    props.dropDownDataList[dropIndex].selectedIndex = props.dropDownDataList[dropIndex].selectedIndex === optionIndex ? -1 : optionIndex
    props.dropDownDataList[dropIndex].show = false
    emit('change', {
      dropIndex,
      optionIndex,
      value: props.dropDownDataList[dropIndex].model,
    })
  }

  // 定义事件
  const emit = defineEmits<{
    (
      e: 'change',
      data: {
        dropIndex: number
        optionIndex: number
        value: any
      },
    ): void
  }>()
</script>

<style scoped lang="scss">
  .dropdown-container {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: #fff;
    height: 90rpx;
  }

  /* 下拉菜单头部 */
  .dropdown-header {
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    background-color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .dropdown-item {
      display: flex;
      align-items: center;
      padding: 24rpx 32rpx;
      cursor: pointer;
      position: relative;
      flex: 1;
      justify-content: center;
      border-right: 1px solid #f5f5f5;

      &:last-child {
        border-right: none;
      }

      .dropdown-label {
        font-size: 28rpx;
        color: #333;
        transition: color 0.2s;
      }
      .dropdown-label.selected {
        color: #409eff;
        font-weight: bold;
      }

      .dropdown-icon {
        color: #999;
        margin-left: 8rpx;
        transition: transform 0.3s ease;
      }

      .rotate {
        transform: rotate(180deg);
      }

      &.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 32rpx;
        right: 32rpx;
        height: 4rpx;
        background-color: #409eff;
      }
    }
  }

  /* 下拉内容区域 */
  .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    border-radius: 0 0 12rpx 12rpx;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    z-index: 99;

    &.show {
      max-height: 600rpx;
      opacity: 1;
      padding: 16rpx 0;
    }

    .dropdown-option {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      color: #666;
      transition: background-color 0.2s, color 0.2s;

      &.optionActive {
        background-color: #f5f7fa;
        color: #409eff;
      }

      .option-check {
        color: #409eff;
        margin-left: 8rpx;
      }
    }
  }

  /* 遮罩层 */
  .dropdown-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 98;

    &.active {
      opacity: 1;
      pointer-events: auto;
    }
  }
  .dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
